<template>
    <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="3" @close="close">
        <div class="selectSpecBox">
            <!-- <div class="spdg-title">Choose Specifications</div> -->
            <div class="shopinginfo">
                <div class="sp-box">
                    <cut-image :url='curSpecImg'/>
                </div>
                <div class="txtbox">
                    <div class="price" v-if="detail.internalEthPrice">
                        <img src="/images/priceIcon.png" alt=""/>
                        <b><em>{{detail.internalEthPrice.standardString}}</em>(${{detail.internalPrice.decimalTwoString}})</b>
                    </div>
                    <h5 v-if="orderInfo.specs">{{orderInfo.specs.specGroupName+"/"+orderInfo.specs.specName}}</h5>
                </div>
            </div>
            <div class="spdg-main">
                <div class="spceItem" v-for="dt in detail.specs" :key="dt.specGroupName">
                    <Title>{{dt.specGroupName}}</Title>
                    <div class="specItemCon">
                        <span v-for="dt2 in dt.specItems" :key="dt2.specName" :class="{'selected':dt2.specName==orderInfo.specs.specName}" @click="setChoise(dt,dt2)">
                            {{dt2.specName}}
                        </span>
                    </div>
                </div>
            </div>
            <div class="gmNumber">
                <div class="dfev">
                    <Title>{{title1}}:</Title>
                </div>
                <div class="num">
                    <stepper v-model="orderInfo.quantity" :min='1' :readonly="true"/>
                </div>
            </div>
            <div class="sp-btnBox">
                <my-button :disabled="!orderInfo.specs.specName">
                    <pay-button :type="1">{{title2}}</pay-button>
                </my-button>

                <!-- <my-button text="comfirm"/> -->
            </div>
        </div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myDailog from '@/components/myDailog.vue'
import myButton from '@/components/myButton.vue';
import Title from '@/components/title.vue';
import stepper from '@/components/stepper.vue'
import payButton from '@/components/payButton.vue';
import cutImage from '@/components/cutImage.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myDailog,
       myButton,
       Title,
       stepper,
       payButton,
       cutImage
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            showFlag:true,
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            curSpecImg:'',
            title1:t('goods.text9'),
            title2:t('goods.text10')

        })

        onMounted(()=>{
            // 设置默认选择第一个商品规格
            if(state.detail.specs && state.detail.specs.length>0){
                setChoise(state.detail.specs[0],state.detail.specs[0].specItems[0])
            }
            
        })

        const close =()=>{
            context.emit('close', false)
        }

        const setChoise = (o1,o2)=>{
            store.commit('shop/set_orderInfo',{specs:{
                specGroupName:o1.specGroupName,
                specName:o2.specName
            }})
            state.curSpecImg = o2.imageUrl || state.detail.imageUrl
            console.log("YYYY:",state.orderInfo)
        }

        return{
            ...toRefs(state),
            close,
            setChoise
        }
    }
}
</script>

<style lang="scss" scoped>
    .selectSpecBox{
        display: flex;
        flex-flow: column;
        height: 100%;
        padding:0 20px 20px 20px;
        .spdg-title{
            font-size: 30px;
            color: rgb(255, 255, 255,0.7);
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            padding: 10px 0;
        }
        .spdg-main{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
            .spceItem{
                padding: 30px 0 0 0;
                &+.spceItem{
                    margin-top: 20px;
                }
                .specItemCon{
                    display: flex;
                    height: 80px;
                    line-height: 70px;
                    width: 100%;
                    overflow: hidden;
                    overflow-x: auto;
                    padding: 15px 0 0 0;
                    span{
                        height: 100%;
                        background: url(/images/flowRanking/typebg1.png) left top no-repeat;
                        background-size: 100% 100%;
                        color: #fff;
                        font-size: 28px;
                        text-align: center;
                        padding: 0 30px;
                        border: 1px;
                        border-radius: 10px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        &.selected{
                            background-image: url(/images/flowRanking/typebg2.png);
                        }
                        &+span{
                            margin: 0 0 0 20px;
                        }
                    }
                }
            }
        }
        .gmNumber{
            display: flex;
            padding: 20px 0 40px 0;
            line-height: normal;
            .dfev{
                flex: 1;
                padding:10px 0 0 0
            }
            .num{
                width: 300px;
            }
        }
        .sp-btnBox{
            width: 360px;
            margin: 0 auto 0 auto;
        }
        .shopinginfo{
            display: flex;
            height: 100px;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 22px;
            line-height: normal;
            .sp-box{
                height: 100%;
                width: 100px;
                flex-shrink: 0;
                .cutImgBox{
                    .inimg{
                        border-top-right-radius:20px;
                        border-bottom-left-radius:20px
                    }
                }
            }
            .txtbox{
                flex: 1;
                width: 0;
                padding: 0 0 0 20px;
                .price{
                    display: flex;
                    font-size: 28px;
                    align-items: center;
                    img{
                        display: block;
                        height: 34px;
                    }
                    em{
                        font-style: normal;
                        color: #CFFFFF;
                    }
                    b{
                        padding: 0 0 0 15px;
                    }
                }
                h5{
                    padding: 30px 0 0 0;
                    margin: 0;
                    font-size: 24px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
</style>